<template>
  <div style="width: 100%; height: 100%;">
    <kunkka-panel-line
      ref="kunkkaPanelLine"
      :panel="panels"
      :link="links"
      style="border: 1px solid" />
    <el-row style="position: fixed; right: 0; bottom: 0;">
      <el-button type="success" size="mini" @click="reset">重置</el-button>
      <el-button type="success" size="mini" @click="getNexus">获取连接数据</el-button>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        links: [
          { from: 'a1', to: 'c3-1-1'},
          { from: 'b1', to: 'a2-1-1'},
          { from: 'c2', to: 'b1-1-1'}
        ],
        panels: [
          {
            paneid: 'pane1', // 面板id
            panelabel: '面板1的自我介绍', // 面板文字
            width: 200, // 面板宽度(px)
            left: 30, // 面板距离容器左侧距离(px)
            top: 30, // 面板距离容器顶部距离(px),
            children: [ // 面板下节点数据
              {
                id: 'a1',
                label: '节点1'
              },
              {
                id: 'a2',
                label: '节点2',
                children: [
                  {
                    id: 'a2-1',
                    label: '节点2-1',
                    children: [
                      {
                        id: 'a2-1-1',
                        label: '节点2-1-1'
                      }
                    ]
                  }
                ]
              },
              {
                id: 'a3',
                label: '节点3'
              }
            ]
          },
          {
            paneid: 'pane2', // 面板id
            panelabel: '我是面板2', // 面板文字
            width: 200, // 面板宽度(px)
            left: 630, // 面板距离容器左侧距离(px)
            top: 30, // 面板距离容器顶部距离(px),
            children: [ // 面板下节点数据
              {
                id: 'b1',
                label: '节点1',
                children: [
                  {
                    id: 'b1-1',
                    label: '节点1-1',
                    children: [
                      {
                        id: 'b1-1-1',
                        label: '节点1-1-1'
                      }
                    ]
                  }
                ]
              },
              {
                id: 'b2',
                label: '节点2'
              },
              {
                id: 'b3',
                label: '节点3'
              }
            ]
          },
          {
            paneid: 'pane3', // 面板id
            panelabel: '我是面包3', // 面板文字
            width: 200, // 面板宽度(px)
            left: 330, // 面板距离容器左侧距离(px)
            top: 330, // 面板距离容器顶部距离(px),
            children: [ // 面板下节点数据
              {
                id: 'c1',
                label: '节点1'
              },
              {
                id: 'c2',
                label: '节点2'
              },
              {
                id: 'c3',
                label: '节点3',
                children: [
                  {
                    id: 'c3-1',
                    label: '节点3-1',
                    children: [
                      {
                        id: 'c3-1-1',
                        label: '节点3-1-1'
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    },
    methods: {
      reset() {
        this.$refs.kunkkaPanelLine.reset()
      },
      getNexus() {
        console.log(this.$refs.kunkkaPanelLine.nexus)
        this.$message.success(`${JSON.stringify(this.$refs.kunkkaPanelLine.nexus)}`)
      }
    }
  }

</script>
